package app.itgungnir.compose.wan.business.login

import android.content.res.Configuration
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.AccountCircle
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import app.itgungnir.compose.wan.Routes
import app.itgungnir.compose.wan.theme.WanComposePreviewTheme
import app.itgungnir.compose.wan.widgets.WanButton
import app.itgungnir.compose.wan.widgets.WanPasswordInput
import app.itgungnir.compose.wan.widgets.WanTextButton
import app.itgungnir.compose.wan.widgets.WanTextInput

@Composable
fun LoginUI(
    navController: NavController = rememberNavController(),
    loginCallback: (String, String) -> Unit = { _, _ -> }
) {
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 25.dp)
    ) {
        item {
            Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                val userNameValue = remember { mutableStateOf(TextFieldValue()) }
                val passwordValue = remember { mutableStateOf(TextFieldValue()) }
                Spacer(modifier = Modifier.height(10.dp))
                Icon(
                    modifier = Modifier.size(100.dp),
                    imageVector = Icons.Outlined.AccountCircle,
                    contentDescription = "",
                    tint = MaterialTheme.colors.primary
                )
                Spacer(modifier = Modifier.height(30.dp))
                WanTextInput(state = userNameValue, label = "请输入用户名")
                Spacer(modifier = Modifier.height(20.dp))
                WanPasswordInput(state = passwordValue, label = "请输入密码")
                Spacer(modifier = Modifier.height(50.dp))
                WanButton(modifier = Modifier.fillMaxWidth(), text = "登录") {
                    loginCallback.invoke(userNameValue.value.text, passwordValue.value.text)
                }
                Spacer(modifier = Modifier.height(10.dp))
                WanTextButton(text = "没有账号？去注册") { navController.navigate(Routes.REGISTER) }
                Spacer(modifier = Modifier.height(50.dp))
            }
        }
    }
}

@Preview(name = "Light mode")
@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
private fun LoginPreview() {
    WanComposePreviewTheme {
        LoginUI()
    }
}
